<template>
	<view class="radioIcon" :class="props.isShow?'radioIcon_active' : ''">
		<image class="radioIcon_icon" src="@/static/base/correct.png" mode="">
		</image>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import store from "@/store/index.js"
	const props = defineProps({
		isShow: {
			type: Boolean,
			default: false
		}
	})
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";
	.radioIcon {
		width: 1.2em;
		height: 1.2em;
		border: $baseColorBorder;
		border-radius: 100%;
		margin-right: 0.5em;
		position: relative;

		&_icon {
			width: $midFontsize;
			height: $midFontsize;
			position: absolute;
			top: 50%;
			left: 50%;
			opacity: 0;
			transform: translate(-50%, -50%);
			transition: $baseTransition;
		}
	}

	.radioIcon_active {
		background: $baseColor_mid;

		.radioIcon_icon {
			opacity: 1;
		}
	}
</style>